<template>
  <div class="dashboard-editor-container">

    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-col :span="12" :xs="24" :sm="24" :lg="12">
        <line-chart :chart-data="lineChartData"/>
      </el-col>
      <el-col :span="12" :xs="24" :sm="24" :lg="12">
          <bar-chart :chart-data="lineChartData"/>
      </el-col>
    </el-row>
   <information-group @handleSetLineChartData="handleSetLineChartData" />  
   <el-dialog :title="title" :visible.sync="wxConcatOpen" width="70%" append-to-body>

   <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
     
     <el-form-item label="姓名" prop="name">
       <el-input
         v-model="queryParams.name"
         placeholder="请输入姓名"
         clearable
         @keyup.enter.native="handleQuery"
       />
     </el-form-item>
    
     <el-form-item>
       <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
       <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
     </el-form-item>
   </el-form>

   <el-row :gutter="10" class="mb8">
     <right-toolbar :showSearch.sync="showSearch" @queryTable="getWxConcatsList"></right-toolbar>
   </el-row>
    
   <el-table v-loading="loading" :data="wxContactsList" @selection-change="handleSelectionChange">
     <el-table-column type="selection" width="55" align="center" />
     <el-table-column label="序号" align="center" type="index" :index="createIndex" />
     <el-table-column label="企业名称" align="center" prop="companyName" :show-overflow-tooltip="true">
       <template slot-scope="scope">
         <span>{{scope.row.companyName}}</span>
       </template>
     </el-table-column>
     <el-table-column label="姓名" align="center" prop="name" />
     <el-table-column label="'性别" align="center" prop="sex" >
      <template slot-scope="scope">
         <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
       </template>
     </el-table-column>
     
     <el-table-column label="会内职务" align="center" prop="internalJob" />
     <el-table-column label="企业职务" align="center" prop="companyJob" />
     <el-table-column label="社会职务" align="center" prop="societyJob" />
     <el-table-column label="地址" align="center" prop="address" :show-overflow-tooltip="true">
        <template slot-scope="scope">
         <span>{{scope.row.address}}</span>
       </template>
     </el-table-column>
     <el-table-column label="办公电话" align="center" prop="phone" />
     <el-table-column label="手机" align="center" prop="mobile" />
     <el-table-column label="邮箱" align="center" prop="email" />
     <el-table-column label="会员类型" align="center" prop="vipType">
        <template slot-scope="scope">
         <dict-tag :options="dict.type.sys_platform_type" :value="scope.row.vipType"/>
       </template>
     </el-table-column>
   </el-table>
   
   <pagination
     v-show="total>0"
     :total="total"
     :page.sync="queryParams.pageNum"
     :limit.sync="queryParams.pageSize"
     @pagination="getWxConcatsList"
   />
   </el-dialog>
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import InformationGroup from './dashboard/InformationGroup'
import {chartInfo} from "@/api/system/home";
import { listWxContacts, getWxContacts, delWxContacts, addWxContacts, updateWxContacts,getVipRadio } from "@/api/allocation/wxContacts";
import { type } from 'os'
export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    InformationGroup
  },
  dicts: ['sys_member_audit_type','sys_user_type','sys_platform_type','sys_user_sex'],
  data() {
    return {
      lineChartData:{
        expectedData:[],
        actualData:[],
      },
      title:'',
      //用户弹出层
      wxConcatOpen:false,
      //请求参数
      queryForm:{},
      //返回表格数据
      wxContactsList:[],
      // 显示搜索条件
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        asId: null,
        companyName: null,
        name: null,
        namePy: null,
        sex: null,
        internalJob: null,
        companyJob: null,
        societyJob: null,
        address: null,
        phone: null,
        mobile: null,
        email: null,
        vipType: null,
        isOld: null,
        openid: null,
        status: null,
        tradeId: null,
        addrCoords: null,
        detailedAddress: null,
        articleType: null,
        contactsType: null
      },
      total:0,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      //组件类型
      valType:""
    }
  },
  created(){
    this.getList();
    //用户弹出数据
    this.getWxConcatsList();
  },
  methods: {
    createIndex(index){
      return (this.queryParams.pageNum-1)*(this.queryParams.pageSize)+index+1;
    },
    getList(){
      chartInfo().then(res=>{
        res.userList.forEach(el => {
           this.lineChartData.expectedData.push(el.num);
        });
        res.userMonthList.forEach(data=>{
          this.lineChartData.actualData.push(data.num)
        })
      })
    },
   
    handleSetLineChartData(type) {
      console.info(type);
      if(type=="newVisitis"||type=="messages"
      ||type=="purchases"||type=="shoppings"
      ||type=="newVisitis"||type=="newVisitis"){
        this.loading = true;
      listWxContacts(this.queryParams).then(response => {
        this.wxContactsList = response.rows;
        this.total = response.total;
        this.loading = false;
        this.wxConcatOpen=true;
        if(type=="newVisitis"){
          this.title="入驻平台数"
        }
        else if(type=="messages"){
          this.title="关注总数"
        }
        else if(type=="purchases"){
          this.title="总会员数"
        }
        else if(type=="shoppings"){
          this.title="个人会员数"
        }
        else if(type=="newVisitis"){
          this.title="入驻平台数"
        }
        else if(type=="newVisitis"){
          this.title="入驻平台数"
        }
       
      });
      }
    },
    getWxConcatsList(){
      this.loading = true;
      listWxContacts(this.queryParams).then(response => {
        this.wxContactsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
     // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getWxConcatsList();
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
